<template>
	<!-- #ifdef APP-NVUE -->
	<cell>
		<!-- #endif -->
		<view
			class="v-list-item"
			:ref="`v-list-item-${anchor}`"
			:anchor="`v-list-item-${anchor}`"
			:class="[`v-list-item-${anchor}`]"
		>
			<slot />
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * List 列表
 * @description 该组件为高性能列表组件
 * @property {String | Number}	anchor	用于滚动到指定item
 * @example <v-list-ite v-for="(item, index) in indexList" :key="index" ></v-list-item>
 */
export default {
	name: "v-list-item",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 节点信息
			rect: {},
			index: 0,
			show: true,
			sys: uni.$u.sys(),
		};
	},
	computed: {},
	inject: ["uList"],
	watch: {
		// #ifndef APP-NVUE
		"uList.innerScrollTop"(n) {
			const preLoadScreen = this.uList.preLoadScreen;
			const windowHeight = this.sys.windowHeight;
			if (n <= windowHeight * preLoadScreen) {
				this.parent.updateOffsetFromChild(0);
			} else if (this.rect.top <= n - windowHeight * preLoadScreen) {
				this.parent.updateOffsetFromChild(this.rect.top);
			}
		},
		// #endif
	},
	created() {
		this.parent = {};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			// 初始化数据
			this.updateParentData();
			this.index = this.parent.children.indexOf(this);
			this.resize();
		},
		updateParentData() {
			// 此方法在mixin中
			this.getParentData("v-list");
		},
		resize() {
			this.queryRect(`v-list-item-${this.anchor}`).then((size) => {
				const lastChild = this.parent.children[this.index - 1];
				this.rect = size;
				const preLoadScreen = this.uList.preLoadScreen;
				const windowHeight = this.sys.windowHeight;
				// #ifndef APP-NVUE
				if (lastChild) {
					this.rect.top = lastChild.rect.top + lastChild.rect.height;
				}
				if (
					size.top >=
					this.uList.innerScrollTop +
						(1 + preLoadScreen) * windowHeight
				)
					this.show = false;
				// #endif
			});
		},
		// 查询元素尺寸
		queryRect(el) {
			return new Promise((resolve) => {
				// #ifndef APP-NVUE
				this.$uGetRect(`.${el}`).then((size) => {
					resolve(size);
				});
				// #endif

				// #ifdef APP-NVUE
				const ref = this.$refs[el];
				dom.getComponentRect(ref, (res) => {
					resolve(res.size);
				});
				// #endif
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-list-item {
}
</style>
